<template>
    <div class="addNewMenber">
        <div class="header-title">增员参保</div>
        <div style="margin-top:50px">
            <el-steps :active="active" finish-status="success" align-center style="margin: 0 auto;width:90%">
                <el-step title="填写参保人信息"></el-step>
                <el-step title="社保"></el-step>
                <el-step title="公积金"></el-step>
                <el-step title="商保"></el-step>
                <el-step title="确认"></el-step>
            </el-steps>
        </div>
        <div class="addNewMenber-main">
            <div class="addNewMenber-input-flex-one"  v-if="active === 0">
                <div class="input-flex-main">
                    <div style="height:40px">
                        <span class="xing-red">*</span>
                        <span class="title-input">姓名：</span>
                        <el-input v-model="inputName" placeholder="请输入姓名"></el-input>
                    </div>
                    <div style="margin-left: 20px;height:40px">
                        <span class="xing-red">*</span>
                        <span class="title-input">证件号码：</span>
                        <el-input v-model="inputPapers" placeholder="请输入证件号码"></el-input>
                    </div>
                    <div style="margin-left: 31px;;height:40px">
                        <span class="title-input">手机号码：</span>
                        <el-input v-model="inputIhopne" placeholder="请输出手机号码"></el-input>
                    </div>
                </div>
                <div class="input-flex-main">
                    <div style="height:40px;">
                        <span class="xing-red">*</span>
                        <span class="title-input">国籍：</span>
                        <el-select v-model="inputGuoji" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="margin-left: 20px;height:40px">
                        <span class="xing-red">*</span>
                        <span class="title-input">户口性质：</span>
                        <el-select v-model="inputAccount" placeholder="请选择">
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="margin-left: 20px;height:40px">
                        <span class="xing-red">*</span>
                        <span class="title-input">出生日期：</span>
                        <el-date-picker
                        @change='DataList(inputData)'
                        v-model="inputData"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                        <!-- <span>{{inputData}}</span> -->
                    </div>
                </div>
                <div style="display:flex;height:40px;margin-top: 30px;">
                    <span class="xing-red" style="margin-right:4px;">* </span>
                    <span class="title-input"> 户籍所在地：</span>
                    <v-distpicker 
                    :province="inputsheng"
                    :city="inpushi"
                    :area="inpuqu"
                    @selected="selected"
                    ></v-distpicker>
                </div>
                <div class="input-flex-main">
                    <div style="height:40px">
                        <span class="xing-red">*</span>
                        <span class="title-input">性别：</span>
                        <el-radio v-model="radio" label="1">男</el-radio>
                        <el-radio v-model="radio" label="2">女</el-radio>
                    </div>
                    <div style="height:40px;margin-left: 100px;">
                        <span class="title-input">民族：</span>
                        <el-select v-model="inputNation" placeholder="请选择">
                            <el-option
                            v-for="item in nations"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <!-- 社保 -->
            <div class="addNewMenber-input-flex-two" v-if="active === 1">
                <div class="addNewMenber-div-header">
                    <span class="addNewMenber-div-header-span">参保人：{{inputName}} （ {{inputPapers}} )</span>
                </div>
            </div>
            <div style="width: 1200px;margin: 0 auto;">
                <div class="next-bu" @click="nextBu">下一步</div>
            </div>
        </div>
    </div>
    
</template>
<script>
import moment from 'moment'
import VDistpicker from 'v-distpicker'
import qs from 'qs'
export default {
    components:{
        VDistpicker 
    },
    data(){
        return{
            active: 0,
            inputGuoji:'',
            options:[
                {
                    value:'中国',
                    label:'中国'
                },{
                    value:'港澳台',
                    label:'港澳台'
                },{
                    value:'外籍',
                    label:'外籍'
                }
            ],
            options2:[
                {
                    value:'农村',
                    label:'农村'
                },{
                    value:'城镇',
                    label:'城镇'
                }
            ],
             nations:[{"value":"汉族","name":"汉族"},{"value":"蒙古族","name":"蒙古族"},{"value":"回族","name":"回族"},
                {"value":"藏族","name":"藏族"},{"value":"维吾尔族","name":"维吾尔族"},{"value":"苗族","name":"苗族"},
                {"value":"彝族","name":"彝族"},{"value":"壮族","name":"壮族"},{"value":"布依族","name":"布依族"},
                {"value":"朝鲜族","name":"朝鲜族"},{"value":"满族","name":"满族"},{"value":"侗族","name":"侗族"},
                {"value":"瑶族","name":"瑶族"},{"value":"白族","name":"白族"},{"value":"土家族","name":"土家族"},
                {"value":"哈尼族","name":"哈尼族"},{"value":"哈萨克族","name":"哈萨克族"},{"value":"傣族","name":"傣族"},
                {"value":"黎族","name":"黎族"},{"value":"傈僳族","name":"傈僳族"},{"value":"佤族","name":"佤族"},
                {"value":"畲族","name":"畲族"},{"value":"高山族","name":"高山族"},{"value":"拉祜族","name":"拉祜族"},
                {"value":"水族","name":"水族"},{"value":"东乡族","name":"东乡族"},{"value":"纳西族","name":"纳西族"},
                {"value":"景颇族","name":"景颇族"},{"value":"柯尔克孜族","name":"柯尔克孜族"},{"value":"土族","name":"土族"},
                {"value":"达斡尔族","name":"达斡尔族"},{"value":"仫佬族","name":"仫佬族"},{"value":"羌族","name":"羌族"},
                {"value":"布朗族","name":"布朗族"},{"value":"撒拉族","name":"撒拉族"},{"value":"毛难族","name":"毛难族"},
                {"value":"仡佬族","name":"仡佬族"},{"value":"锡伯族","name":"锡伯族"},{"value":"阿昌族","name":"阿昌族"},
                {"value":"普米族","name":"普米族"},{"value":"塔吉克族","name":"塔吉克族"},{"value":"怒族","name":"怒族"},
                {"value":"乌孜别克族","name":"乌孜别克族"},{"value":"俄罗斯族","name":"俄罗斯族"},{"value":"鄂温克族","name":"鄂温克族"},
                {"value":"崩龙族","name":"崩龙族"},{"value":"保安族","name":"保安族"},{"value":"裕固族","name":"裕固族"},
                {"value":"京族","name":"京族"},{"value":"塔塔尔族","name":"塔塔尔族"},{"value":"独龙族","name":"独龙族"},
                {"value":"鄂伦春族","name":"鄂伦春族"},{"value":"赫哲族","name":"赫哲族"},{"value":"门巴族","name":"门巴族"},
                {"value":"珞巴族","name":"珞巴族"},{"value":"基诺族","name":"基诺族"}],
            inputName:'张三', // 姓名
            inputPapers:'440201198010232210', // 证件号码
            inputAccount:'', // 户口
            inputData:'', // 出生日期
            inputsheng:'', // 省
            inpushi:'', // 市
            inpuqu:'', // 区
            inputDizhi:'',// 拼接字符
            inputIhopne:'',
            radio: '',
            inputNation:'' // 民族
        }
    },
    methods: {  
        selected(data) {
            this.inputsheng = data.province.value
            this.inpushi = data.city.value
            this.inpuqu = data.area.value
            this.inputDizhi = this.inputsheng + this.inpushi +this.inpuqu
            console.log(this.inputDizhi);
        },
        nextBu(){
            if(!this.inputName){
                this.$message({
                    message: '请输入姓名',
                    type: 'warning'
                });
            }else if(!this.inputPapers){
                this.$message({
                    message: '请输入证件号码',
                    type: 'warning'
                });
            }else if(!this.inputIhopne){
                this.$message({
                    message: '请输入手机号码',
                    type: 'warning'
                });
            }else if(!this.inputGuoji){
                this.$message({
                    message: '请选择国籍',
                    type: 'warning'
                });
            }else if(!this.inputAccount){
                this.$message({
                    message: '请选择户口',
                    type: 'warning'
                });
            }else if(!this.inputData){
                this.$message({
                    message: '请选择出生日期',
                    type: 'warning'
                });
            }else if(!this.inputsheng){
                this.$message({
                    message: '请选择户籍所在地省',
                    type: 'warning'
                });
            }else if(!this.inpushi){
                this.$message({
                    message: '请选择户籍所在地市',
                    type: 'warning'
                });
            }else if(!this.inpuqu){
                this.$message({
                    message: '请选择户籍所在地区',
                    type: 'warning'
                });
            }else if(!this.radio){
                this.$message({
                    message: '请选择性别',
                    type: 'warning'
                });
            }else if(!this.inputNation){
                this.$message({
                    message: '请选择民族',
                    type: 'warning'
                });
            }else{
                console.log(this.inputGuoji,this.inputName,this.inputPapers,this.inputDizhi,this.inputAccount,this.inputData,this.radio,this.inputNation,this.inputIhopne);
                this.$axios.post('http://172.16.1.105:7070/shangshebao/baseInfo',null,{
                    headers:{
                        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls',
                        'Content-type': 'application/json',
                        'charset': 'UTF-8'
                    },
                    body :{
                        nationality : this.inputGuoji,
                        name : this.inputName,
                        id_card : this.inputPapers,
                        region : this.inputDizhi,
                        residence_type : this.inputAccount,
                        birthday : this.inputData,
                        sex : this.radio,
                        nation : this.inputNation,
                        phone : this.inputIhopne
                    }
                }).then(res =>{
                    console.log(res);
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        DataList(a){
            this.inputData = moment(a).format("YYYY-MM-DD")
        }       
    },


}
</script>

<style scoped>
    .addNewMenber{
        height: 800px;
        background: #FFFFFF;
        box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.08);
        border-radius: 5px;
        margin-right: 22px;
    }
    .header-title{
        height: 68px;
        border-bottom: #D9D9D9 solid 1px;
        font-size: 18px;
        font-family: "PingFangSC-Semibold", "PingFang SC";
        font-weight: 600;
        color: #615F66;
        line-height: 68px;
        padding-left: 24px;
    }
    div >>> .el-step__head.is-success{
        color: #7A5FF7;
        border-color: #7A5FF7;
    }
    div >>> .el-step__title.is-success{
        color: #7A5FF7;
    }
    div >>> .is-process{
        font-weight: 500;
    }
    div >>> .el-step__icon-inner{
        font-weight: 500;
    }
    div >>> .el-step__head.is-process{
        color: #7A5FF7;
        border-color: #7A5FF7;
    }
    div >>> .el-step__title.is-process{
        color: #7A5FF7;
    }
    .addNewMenber-input-flex-one,
    .addNewMenber-input-flex-two{
        margin: 40px auto;
        width: 1200px;
    }
    .input-flex-main{
        margin-top:30px;
        display: flex;
    }
    .xing-red{
        font-size: 14px;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        color: #F75F82;
        line-height: 40px;
    }
    .title-input{
        font-size: 14px;
        font-family: 'PingFangSC-Regular', "PingFang SC";
        font-weight: 400;
        color: #455A64;
        line-height: 40px;
    }
    div >>> .el-input__inner{
        width: 150px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 3px;
        border: 1px solid #D9D9D9;
    }
    div >>> .el-select .el-input.is-focus .el-input__inner{
        border-color: #7A5FF7;
    }

    div >>> .el-input{
        width: 150px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 3px;
        /* cursor:pointer; */
    }
    div >>> .el-input__inner{
        cursor:pointer; 
    }
    div >>> .el-select .el-input .el-select__caret.is-reverse{
        margin-top: 0px;
    }
    div >>> .el-icon-arrow-up{
        margin-top: 8px;
    }
    .distpicker-address-wrapper >>> select{
        width: 150px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 3px;
        border: 1px solid #D9D9D9;
        font-size: 12px;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        padding-left: 4px;
        cursor:pointer; 
    }
    .el-radio{
        height: 40px;
        line-height: 40px;
    }
    .next-bu{
        width: 80px;
        height: 32px;
        background: #7A5FF7;
        border-radius: 3px;
        font-size: 16px;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        cursor:pointer; 
    }
    .addNewMenber-main{
        margin: 30px 10px 0px 70px;
    }
    .addNewMenber-div-header{
        width: 340px;
        height: 24px;
        background: #F1EEF8;
        border-radius: 4px;
        border: 1px solid #7A5FF7;
    }
    .addNewMenber-div-header-span{
        font-size: 14px;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        color: #7A5FF7;
        line-height: 24px;
        text-align: center;
        margin: 0px 12px;
    }
</style>